<script setup>
import {
    Collection,
    Document,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
} from '@element-plus/icons-vue'
import defaultAvatar from '@/assets/defaultAvatar.png'

import {userInfoService} from '@/api/user.js'
import useUserInfoStore from '@/stores/userInfo.js'
import {useTokenStore} from '@/stores/token.js'
import {useCategoryInfoStore} from '@/stores/categoryInfo.js'

import commonLayout from '@/components/commonLayout.vue'

const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();




//条目被点击后,调用的函数
import {useRouter} from 'vue-router'
const router = useRouter();
import {ElMessage,ElMessageBox} from 'element-plus'
/* import { fr } from 'element-plus/es/locale' */
const handleCommand = (command)=>{
    //判断指令
    if(command === 'logout'){
        //退出登录
        ElMessageBox.confirm(
        '您确认要退出吗?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //退出登录
            //1.清空pinia中存储的token以及个人信息
            tokenStore.removeToken()
            userInfoStore.removeInfo()

            //2.跳转到登录页面
            router.push('/login')
            ElMessage({
                type: 'success',
                message: '退出登录成功',
            })
            
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '用户取消了退出登录',
            })
        })
    }else{
        //路由
        router.push('/user/'+command)
    }
}
</script>

<template>
    <el-container class="layout-container">
        
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header >
                <div><strong>欢迎使用食品溯源系统</strong>
                </div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="defaultAvatar" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="profile" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                            <el-dropdown-item command="password" :icon="EditPen">重置密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
               <!--  <div style="width: 1290px; height: 570px;border: 1px solid red;">
                    内容展示区
                </div> -->
                <common-layout >
                    <router-view></router-view>
                </common-layout>
                
            </el-main>
            <!-- 底部区域 -->
            <el-footer>
                
            </el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
    height: 100vh;

    .el-aside {
        background-color: #333; // 修改背景色为深灰色
        margin: 10px;
        border-radius: 10px;

        &__logo {
            height: 120px;
            background: url('@/assets/side_logo.png') no-repeat center / 120px auto;
        }

        .el-menu {
            margin-top :10px;
            border-right: none;
            background-color: #333; // 修改背景色为深灰色
        }
    }

    .el-header {
        margin-top: 10px;
        width: 100%;
        background-color: #333; // 修改背景色为深灰色，与侧边栏一致
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }

        div {
            color: white; // 修改“东哥”文本颜色为白色
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}

.el-menu-item.is-active {
    background-color: #409EFF; // 修改激活文本颜色为浅蓝色
    color: white;
}

.styled-router-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  margin-left: 10px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffffcc;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
  }

  .el-icon {
    margin-right: 4px;
    font-size: 16px;
  }
}
</style>